<template>
	<!-- 退款详情 -->
	<view class="refundDetails-main">
		<!-- 状态 -->
		<view class="refundDetails-type">售后处理中....</view>
		
		<view class="refundDetails-yy">
			<view class="name">
				商品退款
			</view>
			<view class="content">
				原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因
			</view>
		</view>

		<!-- 退款商品 -->
		<view class="refund-shop">
			<view class="refund-shop-header">商品详情</view>
			<view class="shopItem" v-for="item in goodsInfo" :key="item.id">
				<view class="shopImage">
					<image :src="imageUrls(item.fileUrl)" class="images"></image>
				</view>
				<view class="shopInfo">
					<view class="name">
						{{ item.name }}
					</view>
					<view style="font-size: 26rpx; color: #999">规格:{{ item.spec }}</view>
				</view>
				<view class="shopInfo-pir">
					<view class="price">
						￥
						<text style="font-size: 28rpx">{{ item.total_price }}</text>
					</view>
					<view class="num">共{{ item.buy_num }}件</view>
				</view>
			</view>
		</view>
		
		<view class="" style="height: 100px;">
			
		</view>

		<!-- 操作 -->
		<view class="refundDetails-btn" :style="bottomStyle">
			<view class="btn">
				联系客服
			</view>
			<view class="btn">
				联系平台
			</view>
			<view class="btn">
				取消售后
			</view>
		</view>
	</view>
</template>

<script>
import { userOrderDetail } from '../../api/order/index.js';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			goodsInfo: [],
			orderId: ''
		};
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	onLoad(option) {
		const { id } = option;
		this.orderId = id;
		this.getUserOrderDetail(id);
	},
	methods: {
		async getUserOrderDetail(id) {
			try {
				const resData = await userOrderDetail({
					id
				});
				this.goodsInfo = resData.data.goods_info;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},
		
		imageUrls(url){
			return imageUrl(url);
		}
	}
};
</script>

<style scoped lang="scss">
@mixin boxDef {
	background-color: #fff;
	box-sizing: border-box;
	padding: 20rpx;
	border-radius: 10rpx;
}

.refundDetails-main{
	box-sizing: border-box;
	padding: 20rpx;
	background: linear-gradient(to bottom, #ffb3b3, #ffe0e0, #fff);
}

.refundDetails-type {
	height: 80px;
	line-height: 80px;
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	text-align:center;
}
.refund-shop {
	@include boxDef;
	.shopItem {
		display: flex;
		font-size: 13px;
		color: #444;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px #f3f3f3 solid;
		.shopImage {
			width: 140rpx;
			.images {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.shopInfo {
			height: 120rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.shopInfo-pir {
			.price {
				color: #e43927;
				margin-bottom: 5px;
				font-size: 12px;
			}
			.num {
				color: #444;
				text-align: right;
			}
		}
	}
}

.refundDetails-yy{
	box-sizing: border-box;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 10px;
	font-size: 26rpx;
	color: #444;
	margin-bottom: 20rpx;
	.name{
		margin-bottom: 20rpx;
		font-size: 28rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px #f3f3f3 solid;
		font-weight: bold;
	}
}

.refundDetails-btn{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #fff;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	box-sizing: border-box;
	padding: 30rpx;
	gap: 10px;
	.btn{
		padding: 8px 15px;
		background-color: #f3f3f3;
		color: #444;
		border-radius: 4px;
		font-size: 26rpx;
	}
}

.refund-shop-header {
	heigth: 30px;
	line-height: 30px;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #444;
	font-weight: bold;
}
</style>
